import React, { useRef, useState, useEffect } from 'react';
// styles
import styles from './index.less';
// 自定义组件
// 自定义工具和方法
import { transData } from './transData';

export default () => {
  // 使用useState钩子定义一个状态变量pointsArr，用于存储点的数组
  const [pointsArr, setPointsArr] = useState([]);
  // 清除图层的函数
  const clearFun = () => {
    // 调用LFTViewer的setLFTAllData方法，传入清除图层的指令
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl', // 指令类型为控制
          payload: [
            {
              ctrl: 'clearLayer', // 控制指令为清除图层
              groupId: 'MapGroup', // 图层所属的组ID
              layerId: 'canvasMarkersLayer', // 要清除的图层ID
            },
          ],
        },
      ],
      () => {
        // console.log('清除完成了');?
      },
    );
  };
  // 绘制图层

  const drawFun = () => {
    let arrs = [];
    for (let i = 0; i < 100; i++) {
      arrs.push({
        name: 's-' + i,
        positions: [
          Math.random() * (90 - 70) + 0,
          Math.random() * (130 - 100) + 100,
        ],
        color: '#6bffff',
      });
    }
    let drawData = transData(arrs);
    console.log('drawData', drawData);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'draw',
          payload: [
            {
              groupId: 'MapGroup',
              layerId: 'canvasMarkersLayer',
              payload: drawData,
            },
          ],
        },
      ],
      () => {
        // console.log('绘制完成了');
        // let temp1layer = window?.LFTViewer?.getLFTLayer('canvasMarkersLayer', 'MapGroup');
        // temp1layer?._canvasMap.addOnClickListener((e, data) => {
        //   console.log('click', e, temp1layer, data, data[0].payload);
        // });
        // Object.values(temp1).forEach((item) => {
        //   console.log(item._canvasLft, item)
        //   item.parent.
        //   // item._canvasLft.on('mouseover',  (e) => {console.log('mouseover', e)});
        // });
      },
    );
  };
  useEffect(() => {
    // console.log('viewer', window.LFTViewer);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'createLayer',
              groupId: 'MapGroup',
              layerId: 'canvasMarkersLayer',
            },
          ],
        },
      ],
      () => {
        drawFun();
      },
    );
    return () => {
      clearFun();
    };
  }, []);
  return <></>;
};
